<template>
  <div class="login-container">
    <div class="background-overlay"></div>
    <div class="login-content">
      <div class="login-card" ref="loginCard">
        <h2 class="title" ref="title">
          <t-icon name="user-circle" size="28px" style="margin-right: 8px"/>
          Register Now
        </h2>
        <div class="form-container">
          <form @submit.prevent="handleSubmit">
            <div class="input-group">
              <div class="input-wrapper">
                <t-icon name="user" size="20px" class="input-icon"/>
                <input
                  v-model="formData.username"
                  type="text"
                  placeholder="Please input username"
                  :class="{'input-success': formData.username}"
                  class="login-input"
                />
              </div>
            </div>
            <div class="input-group">
              <div class="input-wrapper">
                <t-icon name="lock-on" size="20px" class="input-icon"/>
                <input
                  v-model="formData.password"
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="Please input password"
                  :class="{'input-success': formData.password}"
                  class="login-input"
                />
                <t-icon 
                  :name="showPassword ? 'browse' : 'browse-off'"
                  size="20px" 
                  class="password-toggle"
                  @click="showPassword = !showPassword"
                />
              </div>
            </div>
            <div class="input-group">
              <div class="input-wrapper">
                <t-icon name="lock-on" size="20px" class="input-icon"/>
                <input
                  v-model="formData.confirmPassword"
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="Please confirm password"
                  :class="{'input-success': formData.confirmPassword}"
                  class="login-input"
                />
                <t-icon 
                  :name="showPassword ? 'browse' : 'browse-off'"
                  size="20px" 
                  class="password-toggle"
                  @click="showPassword = !showPassword"
                />
              </div>
            </div>
            <div class="form-footer">
              <label class="remember-me">
                <input type="checkbox" class="checkbox-input">
                <span class="checkbox-label">
                  <t-icon name="check-circle" size="16px" style="margin-right: 4px"/>
                  Remember me
                </span>
              </label>
              <a href="#" class="has-have-account" @click.prevent="router.push('/login')">
                <t-icon name="help-circle" size="16px" style="margin-right: 4px"/>
                已有账号？
              </a>
            </div>
            <button 
              class="submit-button"
              type="submit"
              :disabled="loading"
            >
              <t-icon name="login" />
              <span>Sign Up</span>
              <div v-if="loading" class="spinner"></div>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import anime from 'animejs';
import { useCookies } from '@vueuse/integrations/useCookies';
import { ElMessage } from 'element-plus';
import { register } from '@/api/userApi'; // Assuming you have a register function

const cookie = useCookies()

const router = useRouter();
const loading = ref(false);
const loginCard = ref(null);
const title = ref(null);
const showPassword = ref(false);

const formData = ref({
  username: '',
  password: '',
  confirmPassword: ''
});

const handleSubmit = async () => {
  if(formData.value.username == '' || formData.value.password == '' || formData.value.confirmPassword == '') {
    ElMessage ({
      message: 'Please fill in all fields',
      type: 'error',
    });
    return;
  }
  
  if (formData.value.password !== formData.value.confirmPassword) {
    ElMessage ({
      message: 'Passwords do not match',
      type: 'error',
    });
    return;
  }
  
  loading.value = true;
  register(formData.value) // Assuming you have a register function
  .then(res => {
    console.log(res);
    ElMessage({
      message: '注册成功请登录',
      type: 'success',
    });
    router.push("/login");
  }).catch(err => {
    // Handle registration error
    ElMessage({
      message: err.message || 'Registration failed, please try again',
      type: 'error',
    });
  }).finally(() => {
    loading.value = false; // Stop loading regardless of success or failure
  });
  
};

onMounted(() => {
  // Registration card animation
  anime({
    targets: loginCard.value,
    translateY: [100, 0],
    opacity: [0, 1],
    duration: 1200,
    easing: 'easeOutCubic'
  });

  // Title animation
  anime({
    targets: title.value,
    translateY: [-30, 0],
    opacity: [0, 1],
    duration: 1000,
    delay: 400,
    easing: 'easeOutCubic'
  });

  // Form elements animation
  anime({
    targets: '.form-container',
    opacity: [0, 1],
    translateY: [20, 0],
    delay: 600,
    duration: 800,
    easing: 'easeOutCubic'
  });
});
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(@/imgs/4.jpg) center center fixed;
  background-size: cover;
  filter: blur(3px);
  z-index: -1;
}

.background-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.login-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  width: 460px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.title {
  text-align: center;
  font-size: 28px;
  color: #0052d9;
  margin-bottom: 40px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  opacity: 0;
  padding: 10px 20px;
}

.input-group {
  margin-bottom: 24px;
}

.input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 16px;
  color: #0052d9;
  z-index: 2;
}

.password-toggle {
  position: absolute;
  right: 16px;
  color: #0052d9;
  cursor: pointer;
  z-index: 2;
}

.login-input {
  width: 100%;
  height: 48px;
  padding: 0 48px;
  border: 2px solid #e0e3e9;
  border-radius: 8px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  text-align: center;
}

.login-input:focus {
  outline: none;
  border-color: #0052d9;
  box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.1);
}

.input-success {
  border-color: #00a870 !important;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-input {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 14px;
}

.has-have-account {
  color: #0052d9;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.has-have-account:hover {
  color: #003db3;
}

.submit-button {
  width: 100%;
  height: 48px;
  background: #0052d9;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: all 0.3s ease;
}

.submit-button:hover {
  background: #003db3;
  transform: translateY(-1px);
}

.submit-button:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
  transform: none;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  position: absolute;
  right: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
